/*
 * @Author: 自迩
 * @Date: 2022-02-07 18:46:37
 * @LastEditTime: 2022-02-09 18:28:20
 * @LastEditors: your name
 * @Description:
 * @FilePath: \silence-reader\src\components\ToolBar\index.jsx
 */
import React, { Component } from 'react';
import './index.css';
import Clipboard from 'clipboard';

export default class ToolBar extends Component {

  handleMouseUp = (e)=>{
    //阻止鼠标抬起事件在toolbar上冒泡，避免toolbar消失
    e.stopPropagation()
  }
  hadleMouseDown = (e)=>{
    e.stopPropagation()
  }
  copy = () => {
    let {selectedText} = this.props;
    navigator.clipboard.writeText(selectedText).then(function() {
      console.log('copy success');
    }, function() {
      console.error('copy failure');
    });
  }

  render() {
    // console.log('toolbar-this.props',this.props);
    let {top, left, display,highLine,noteBox,underLine,styleBtnFlag,delectStyle,selectedText} = this.props
    return (
      <div className='toolBar' onMouseDown={this.hadleMouseDown} onMouseUp={this.handleMouseUp} style={{top:top, left:left, display: display? 'block':'none'}}>
        <button className='copy' onClick={this.copy}>复制</button>
        <button className='underLine' onClick={underLine}>划线</button>
        <button className='highLine' onClick={highLine}>高亮</button>
        <button className='note' onClick={ e=> noteBox(true) }>笔记</button>
        <button className='delStyle'  onClick={delectStyle(selectedText)} style={{display:styleBtnFlag? 'inline-block':'none'}} >删除样式</button>
      </div>
    )
  }
}
